<template>

	<a-row>
		<a-col :span="24">
			<a-form>
				<a-form-item>
					线条样式:
					<a-radio-group v-model:value="edgeConfig.edgeTypeCode" @change="reRender">
						<a-radio value="SquareLakeLineEdge">直线</a-radio>
						<a-radio value="SquareLakePolylineEdge">折线</a-radio>
						<a-radio value="curved-edge">圆角折线</a-radio>
						<a-radio value="bezier">曲线</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-form>
		</a-col>

	</a-row>

	<a-row>
		<a-col :span="24">
			<div class="setting-block">
				<div>快捷样式</div>

				<div class="short-styles">
					<div v-for="(item, index) in shortStyles" :key="index"
						:style="{ 'backgroundColor': item.backgroundColor, 'borderColor': item.borderColor, 'borderWidth': item.borderWidth }"
						@click="reRender(item)">
					</div>
				</div>
			</div>

		</a-col>
	</a-row>
	<a-row>
		<a-col :span="24">
			<div class="setting-item">
				<span>背景色</span>
				<a-popover v-model:open="visible" placement="topLeft" title="填充样式" width="220" trigger="click">
					<div class="border-color" :style='{ "backgroundColor": edgeConfig.backgroundColor }'>
					</div>
					<template #content>
						<Sketch v-model="edgeConfig.style.backgroundColor"
							@changButton="(v) => { changeColorProperty(v, 'backgroundColor') }" />
					</template>
				</a-popover>

				<span>背景渐变色</span>
				<a-popover v-model:open="bjjbsVisible" placement="topLeft" title="填充样式" width="220" trigger="click">
					<div class="border-color" :style='{ "backgroundColor": edgeConfig.gradientColor }'></div>
					<template #content>
						<Sketch v-model="edgeConfig.style.gradientColor"
							@changButton="(v) => { changeColorProperty(v, 'gradientColor') }" />
					</template>
				</a-popover>
			</div>
		</a-col>
	</a-row>
	<a-row>
		<a-col :span="24">
			<div class="setting-item">
				<span>线条样式</span>
				<a-select v-model:value="edgeConfig.borderStyle" size="small" style="width:300px" @change="(v) => {
					reRender({
						borderStyle: v
					})
				}">
					<a-select-option value="hidden">不显示</a-select-option>
					<a-select-option v-for="(border, index) in borderStyles" :value="border.value" :key="index">
						<div class="border-style" :style="{ 'borderBottomStyle': border.value }"></div>
					</a-select-option>
				</a-select>
			</div>
		</a-col>
	</a-row>
	<a-row>

		<a-col :span="24">
			<div class="setting-item">
				<span>线条颜色</span>

				<a-popover v-model:open="xtysVisiable" placement="topLeft" title="填充样式" width="220" trigger="click">
					<div class="border-color" :style='{ "backgroundColor": edgeConfig.borderColor }'></div>
					<template #content>
						<Sketch v-model="edgeConfig.style.borderColor"
							@changButton="(v) => { changeColorProperty(v, 'borderColor') }" />
					</template>
				</a-popover>
			</div>
		</a-col>
	</a-row>
	<a-row>
		<a-col :span="24">
			<div class="setting-item">
				<span>线条宽度</span>
				<a-select v-model:value="edgeConfig.borderWidth" style="width:300px" @change="(v) => {
					reRender({
						borderWidth: v
					})
				}">
					<a-select-option v-for="item in borderWidthOptions" :key="item" :value="item">{{
						`${item}px`
					}}</a-select-option>
				</a-select>
			</div>
		</a-col>
	</a-row>
	<a-row>

		<a-col :span="24">
			<div class="setting-item">
				<span>文本颜色</span>

				<a-popover v-model:open="wbysVisiable" placement="topLeft" title="填充样式" width="220" trigger="click">
					<div class="border-color" :style='{ "backgroundColor": edgeConfig.fontColor }'></div>
					<template #content>
						<Sketch v-model="edgeConfig.style.fontColor"
							@changButton="(v) => { changeColorProperty(v, 'fontColor') }" />
					</template>
				</a-popover>


			</div>
		</a-col>
	</a-row>
	<a-row>
		<a-col :span="24">
			<div class="setting-item">
				<span>文本大小</span>
				<a-input-number v-model:value="edgeConfig.fontSize" controls-position="right" size="mini" @change="(v) => {
					reRender({
						fontSize: v
					})
				}" :min="12" :max="30">
				</a-input-number>
				<span>px</span>
			</div>
		</a-col>
	</a-row>
	<a-row>
		<a-col :span="24">
			<div class="setting-item">
				<span>文本字体</span>
				<a-select style="width: 300px;" v-model:value="edgeConfig.fontFamily" size="small" @change="(v) => {
					reRender({
						fontFamily: v
					})
				}">
					<a-select-option v-for="(fontFamily, index) in fontFamilies" :value="fontFamily.value"
						:key="index">{{
							fontFamily.value }}</a-select-option>
				</a-select>
			</div>
		</a-col>
	</a-row>
	<a-row>
		<a-col :span="24">
			<div class="setting-item">
				<span>行高</span>
				<a-select style="width: 300px;" v-model="edgeConfig.lineHeight" size="small" @change="(v) => {
					reRender({
						lineHeight: v
					})
				}">
					<a-select-option v-for="(item, index) in lineHeightOptions" :key="index" :value="item">{{
						`${item}` }}</a-select-option>
				</a-select>
			</div>
		</a-col>
	</a-row>
	<a-row>
		<a-col :span="24">
			<div class="setting-item">
				<span>对齐</span>
				<a-radio-group v-model:value="edgeConfig.textAlign" size="small" @change="(v) => {
					reRender({
						textAlign: v
					})
				}">
					<a-radio-button value="left">左对齐</a-radio-button>
					<a-radio-button value="center">居中</a-radio-button>
					<a-radio-button value="right">右对齐</a-radio-button>
				</a-radio-group>
			</div>
		</a-col>
	</a-row>
	<a-row class="mb-2">
		<a-col :span="24">
			<div class="setting-item">
				<span>文本样式</span>
				<a-space>
					<a-button size="small" @click="() => {
						if (edgeConfig.fontWeight === 'bold') {
							edgeConfig.fontWeight = 'normal'
							reRender({
								fontWeight: 'normal'
							})
						} else {
							edgeConfig.fontWeight = 'bold'
							reRender({
								fontWeight: 'bold'
							})
						}

					}">B</a-button>
					<a-button size="small" @click="() => {
						if (edgeConfig.textDecoration === 'underline') {
							edgeConfig.textDecoration = 'none'
							reRender({
								textDecoration: 'none'
							})
						} else {
							edgeConfig.textDecoration = 'underline'
							reRender({
								textDecoration: 'underline'
							})
						}

					}">U</a-button>
					<a-button size="small" @click="() => {
						if (edgeConfig.fontStyle === 'italic') {
							edgeConfig.fontStyle = 'normal'
							reRender({
								fontStyle: 'none'
							})
						} else {
							edgeConfig.fontStyle = 'italic'
							reRender({
								fontStyle: 'italic'
							})
						}

					}">I</a-button>
				</a-space>
			</div>
		</a-col>
	</a-row>
	<a-row>
		<a-col :span="24">
			<div>
				<a-space>
					<a-button @click="$emit('setZIndex', 'top')">置为顶部</a-button>
					<a-button @click="$emit('setZIndex', 'bottom')">置为底部</a-button>
				</a-space>
			</div>
		</a-col>
	</a-row>

</template>

<script setup>
import { defineExpose, nextTick } from 'vue'
import { Sketch } from '@ans1998/vue3-color'

const props = defineProps(["reConfig", "edgeData"])

const shortStyles = [
	{
		backgroundColor: 'rgb(255, 255, 255)',
		borderWidth: '1px',
		borderColor: 'rgb(42, 42, 42)'
	},
	{
		backgroundColor: 'rgb(245, 245, 245)',
		borderWidth: '1px',
		borderColor: 'rgb(102, 102, 102)'
	},
	{
		backgroundColor: 'rgb(218, 232, 252)',
		borderWidth: '1px',
		borderColor: 'rgb(108, 142, 191)'
	},
	{
		backgroundColor: 'rgb(213, 232, 212)',
		borderWidth: '1px',
		borderColor: 'rgb(130, 179, 102)'
	},
	{
		backgroundColor: 'rgb(255, 230, 204)',
		borderWidth: '1px',
		borderColor: 'rgb(215, 155, 0)'
	},
	{
		backgroundColor: 'rgb(255, 242, 204)',
		borderWidth: '1px',
		borderColor: 'rgb(214, 182, 86)'
	},
	{
		backgroundColor: 'rgb(248, 206, 204)',
		borderWidth: '1px',
		borderColor: 'rgb(184, 84, 80)'
	},
	{
		backgroundColor: 'rgb(220, 210, 230)',
		borderWidth: '1px',
		borderColor: 'rgb(150, 115, 166)'
	}
]

const borderStyles = [
	{
		value: 'solid'
	},
	{
		value: 'dashed'
	},
	{
		value: 'dotted'
	}
]

const fontFamilies = [
	{
		value: 'Arial'
	},
	{
		value: 'Verdana'
	},
	{
		value: 'Georgia'
	},
	{
		value: 'Times New Roman'
	}
]


const borderWidthOptions = Array(11).fill().map((_, i) => i);
const lineHeightOptions = Array(5).fill(1).map((_, i) => _ + i * 0.5);
const edgeConfig = ref({
	type: 'edge',
	edgeTypeCode: 'SquareLakePolylineEdge',
	// shortStyles,
	// borderStyles,
	// fontFamilies,
	style: {},
	backgroundColor: '', // 填充色
	gradientColor: '', // 渐变色
	borderType: 0, // 线条类型
	borderColor: '', // 填充颜色
	borderWidth: 1, // 线条宽度
	borderStyle: '', // 线条类型
	fontSize: 12, // 文本大小
	fontColor: '', // 文本颜色
	fontWeight: '', // 文本加粗
	fontFamily: '', // 文本样式
	lineHeight: '', // 行高
	textAlign: '', // 对齐
	fontWeight: '', // 文本加粗
})

const bjjbsVisible = ref(false)
const visible = ref(false)
const xtysVisiable = ref(false)
const wbysVisiable = ref(false)
onMounted(() => {
	init();
})
watch(() => props.edgeData, (newValue, oldValue) => {
	init();
})

const init = () => {
	console.log(props.edgeData)
	edgeConfig.value = { ...props.edgeData.properties }
	if (!edgeConfig.value.style) {
		edgeConfig.value.style = {}
	}
	edgeConfig.value.id = props.edgeData?.id;
	edgeConfig.value.edgeTypeCode = props.edgeData?.type;

}

const changeColorProperty = ({ activeColor }, type) => {
	edgeConfig.value[type] = activeColor
	visible.value = false;
	bjjbsVisible.value = false;
	xtysVisiable.value = false;
	wbysVisiable.value = false;
	reRender();
}

const reRender = (item) => {
	let config = edgeConfig.value;
	if (item) {
		config = {
			...config,
			...item
		}
	} else {

	}
	nextTick(() => {
		if (props.reConfig) {
			props.reConfig(config);
		}
	})
}

defineExpose({
})
</script>
<style scoped>
.diagram-panel {
	padding: 20px;
}

.short-styles {
	width: 240px;
}

.short-styles>div {
	width: 20px;
	height: 20px;
	margin: 0 10px 5px 0;
	box-sizing: border-box;
	float: left;
	border: 1px solid #fff;
	cursor: pointer;
}

.border-style {
	width: 150px;
	height: 0px;
	margin-top: 18px;
	border-bottom-width: 1px;
	border-bottom-color: black;
}

.setting-block {
	overflow: hidden;
}

.setting-item {
	line-height: 12px;
	font-size: 12px;
	display: flex;
	vertical-align: middle;
	align-items: center;
	margin-top: 10px;
}

.setting-item>span {
	width: 50px;
	margin-right: 10px;
	text-align: right;
	flex-shrink: 0;
	flex-grow: 0;
}

.border-color {
	width: 40px;
	height: 30px;
	display: inline-block;
	border: 1px solid #eaeaeb;
}
</style>
